<template>
  <div class="mobile-bind">
    <mt-popup v-model="popShow" position="middle">
      <div class="bg">
        <div class="title">绑定手机号</div>
        <mt-field label="手机号：" placeholder="点击输入" v-model="phone"></mt-field>
        <mt-field label="" placeholder="输入验证码" v-model="code" class="verify-code">
          <mt-button
            type="default"
            class="send-sms"
            :class="{disabled: codeBtnDis}"
            :disabled="codeBtnDis"
            @click.native="sendSms"
          >
            {{sendBtnText}}
          </mt-button>
        </mt-field>
      </div>
      <mt-button type="default" class="submit" plain :disabled="isDisabled" @click.native="submit">提交</mt-button>
    </mt-popup>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'

  export default {
    name: 'Correction',
    data () {
      return {
        popShow: false,
        phone: '',
        code: '',
        sendBtnText: '发送验证码',
        codeBtnDis: false,
        isSecond: false
      }
    },
    computed: {
      isDisabled () {
        return this.phone === '' || this.code === ''
      }
    },
    methods: {
      sendSms () {
        let params = {phone: this.phone}
        if (params.phone === '') {
          msg('手机号不能为空')
          return false
        }
        if (!/^1[3-9]\d{9}$/.test(params.phone)) {
          msg('手机号格式不正确')
          return false
        }
        this.sendBtn()
        this.$post('/vue/sendsms/verify_code', params).then(data => {
          if (data.Code === 'OK') {
            msg('发送验证码成功！')
          }
        })
      },
      sendBtn () {
        this.codeBtnDis = true
        let time = 60
        let timer = setInterval(() => {
          this.sendBtnText = `已发送(${--time})`
          if (time < 0) {
            clearInterval(timer)
            this.codeBtnDis = false
            this.sendBtnText = '重新发送'
          }
        }, 1000)
      },
      submit () {
        let params = {
          mobile: this.phone,
          code: this.code
        }
        this.$post('/vue/goods/save_user_phone', params).then(data => {
          this.popShow = false
          if (this.isSecond) {
            this.$emit('showSecondDispute')
          } else {
            this.$emit('sendSms')
          }
        })
      }
    }
  }
  const msg = (msg, callback = false) => {
    Toast({
      message: msg,
      position: 'bottom',
      className: 'pop-in-toast',
      duration: 2000
    })
    if (callback) {
      setTimeout(() => {
        callback()
      }, 2000)
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-blue: rgb(108, 184, 222);

  .mobile-bind {
    .mint-popup {
      width: 100vw;
      height: auto;
      padding: 0;
      margin: 0;
      background: transparent;
      text-align: center;
      .bg {
        background-color: #FFF;
        width: 77vw;
        height: auto;
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        transition: inherit;
        .title {
          display: block;
          margin: 0;
          padding: 8px 0;
          font-size: 15px;
          line-height: 24px;
          color: @c-124;
        }
      }
      .mint-button {
        box-shadow: none;
      }
      .submit {
        margin: 32px;
        width: 168px;
        height: 40px;
        border-radius: 20px;
        background-color: @c-blue;
        font-size: 13px;
        line-height: 24px;
        border: 0;
        .mint-button-text {
          color: #FFF;
        }
        &.is-disabled {
          opacity: 1;
          background-color: @c-226;
        }
        &::after {
          border-radius: 20px;
        }
      }
      .verify-code {
        text-align: left;
        .mint-cell-wrapper {
          .mint-cell-value {
            .mint-field-core {
              text-align: left;
            }
          }
        }
        .send-sms {
          width: 100px;
          margin: 0 -12px 0 0;
          background-color: #FFF;
          border: 1px solid @c-blue;
          color: @c-blue;
          &.is-disabled {
            border: 1px solid @c-226;
            color: @c-226;
          }
        }
      }
    }
    .mint-field {
      min-height: 48px;
      margin: 0 12px 16px;
      color: @c-124;
      border-radius: 24px;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
      &:first-child {
          margin-top: 16px;
      }
      .mint-cell-wrapper {
        .mint-cell-value {
          .mint-field-core {
            &::-webkit-input-placeholder {
              color: @c-169;
            }
          }
        }
      }
      .mint-button {
        width: 104px;
        height: 32px;
        margin: 0 -8px 0 0;
        padding: 0;
        background-color: #FFF;
        border: 2px solid @c-blue;
        .mint-button-text {
          color: @c-blue;
        }
        &.is-disabled {
          opacity: 1;
          background-color: #FFF;
          border-color: @c-226;
          .mint-button-text {
            color: @c-226;
          }
        }
      }
    }
  }
  .mint-toast {
    z-index: 2500;
  }
</style>